.#{$scroll-prefix-cls} {
  &-wrapper {
    margin: 0 auto;
    outline: none;
    position: relative;
    width: auto;
  }

  &-container {
    overflow-y: scroll;
  }

  @keyframes ani-stop-slide {
    from {
      overflow-y: hidden;
      tansform: translateZ(0);
    }

    to {
      overflow-y: scroll;
      tansform: translateZ(0);
    }
  }

  &-container-loading {
    animation: ani-stop-slide 1.5s;
  }

  &-content {
    opacity: 1;
    transition: opacity 0.5s;
  }

  &-content-loading {
    opacity: 0.5;
  }

  &-loader {
    padding: 0;
    text-align: center;
    transition: padding 0.5s;
  }
}

.#{$scroll-prefix-cls}-loader-wrapper {
  background-color: inherit;
  height: 0;
  padding: 5px 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.5s, height 0.5s;

  &-active {
    height: 40px;
    transform: scale(1);
  }

  @keyframes ani-demo-spin {
    from {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(180deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .#{$scroll-prefix-cls}-spinner {
    position: relative;
  }

  .#{$scroll-prefix-cls}-spinner-icon {
    animation: ani-demo-spin 1s linear infinite;
  }
}

@media (max-width: $screen-sm) {
  .#{$scroll-prefix-cls} {
  }
}
